﻿<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="评论列表" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="coreshop-padding-10">
			<!--评论-->
			<view class="coreshop-bg-white">
				<view v-for="(item, index) in goodsComments" :key="index">
					<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10"
						v-if="index > 0" />
					<view class="coreshop-common-view-box">
						<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm">
							<view class="coreshop-basis-1">
								<view class="coreshop-avatar sm round"
									:style="[{backgroundImage:'url('+ item.avatarImage +')'}]" />
							</view>
							<view class="coreshop-basis-9 coreshop-font-sm">
								<view>{{ (item.nickName && item.nickName != '')?item.nickName:item.mobile }}</view>
								<view class="coreshop-margin-top-10">{{ item.contentBody || ''}}</view>
								<view class="coreshop-text-gray coreshop-margin-top-10">
									<u-rate v-model="item.score" :count="5" size="15"></u-rate>
								</view>
								<view class="coreshop-margin-top-10" v-if="item.imagesArr">
									<u-album :urls="item.imagesArr" rowCount="4"></u-album>
								</view>
								<view class="coreshop-text-gray coreshop-margin-top-5 coreshop-font-12">
									{{ item.createTime || ''}} {{ item.addon || ''}}</view>
								<view
									class="coreshop-bg-gray coreshop-padding-10 coreshop-border-radius-tr-16 coreshop-margin-top-10"
									v-if="item.sellerContent">
									商家回复：{{item.sellerContent}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" class="coreshop-margin-top-10" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: 0,
				goodsComments: [],
				page: 1,
				limit: 10,
				page: 1,
				pageSize: 20,
				loadStatus: 'loadmore',
				loadIconType: 'flower',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载中',
					nomore: '没有更多了'
				},
			}
		},
		onLoad(options) {
			this.goodsId = options.id;
			this.getGoodsComments();
		},
		onReachBottom() {
			if (this.loadStatus != 'nomore') {
				this.getGoodsComments();
			}
		},
		methods: {
			// 获取商品评论信息
			getGoodsComments() {
				var _that = this;
				let data = {
					page: _that.page,
					limit: _that.limit,
					id: _that.goodsId,
				}
				this.loadStatus = 'loading';
				this.$u.api.goodsComment(data).then(res => {
					if (res.status == true) {
						let _list = res.data.list;
						// 如果评论没有图片 在这块作处理否则控制台报错
						_list.forEach(item => {
							if (!item.hasOwnProperty('images')) {
								_that.$set(item, 'images', [])
							}
							_that.goodsComments.push(item);
						});
						// 根据count数量判断是否还有数据
						if (res.data.totalPages > _that.page) {
							_that.loadStatus = 'loadmore';
							_that.page++;
						} else {
							// 数据已加载完毕
							this.loadStatus = 'nomore';
						}
					} else {
						_that.$refs.uToast.show({
							message: res.msg,
							type: 'error'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>
